<template>
  <div class="attach-viewer-img">
    <img :src="url" :width="imgSize.width" :height="imgSize.height" />
  </div>
</template>
<script>
export default {
  name: "AttachViewerImage",
  props: ["url", "width", "height"],
  data() {
    return {
      maxLength: 658,
    };
  },
  mounted() {},
  computed: {
    imgSize() {
      // 如果宽高都小于等于this.maxLength，则返回原始宽高
      if (this.width <= this.maxLength && this.height <= this.maxLength) {
        return { width: this.width, height: this.height };
      }

      // 如果宽高都大于this.maxLength，则按比例缩小到最长边为this.maxLength
      if (this.width > this.maxLength || this.height > this.maxLength) {
        const ratio = Math.min(
          this.maxLength / this.width,
          this.maxLength / this.height
        );
        return {
          width: Math.round(this.width * ratio),
          height: Math.round(this.height * ratio),
        };
      }

      // 如果只有宽或高大于this.maxLength，则将大的那个缩小到this.maxLength，小的那个按比例缩小
      if (this.width > this.height) {
        return {
          width: this.maxLength,
          height: Math.round((this.maxLength / this.width) * this.height),
        };
      } else {
        return {
          width: Math.round((this.maxLength / this.height) * this.width),
          height: this.maxLength,
        };
      }
    },
  },
  methods: {},
};
</script>
<style scoped></style>
